#{extends 'sc-main.html' /}
#{set title:'Borrow Book' /}

<script type="text/javascript" >

isc.DataSource.create({
    ID:"users",
    dataFormat:"json",
    dataURL:"@{Users.listAllJson()}",
    fields:[
        {title:"Username", name:"username"},
        {title:"First Name", name:"firstName"},
        {title:"Last Name", name:"lastName"}
    ]
});

isc.DynamicForm.create({
    action: "@{BookActions.doBorrow()}",
    width: 500,
    numCols: 1,
    canSubmit:true,
    fields : [
    {name:"bookId", value:"${book.id}", type:'hidden'},
    {name:"bookTitle", title:"Book", value:"${book.name}", readOnly:true},
    {
        name: "username", title: "User Name", editorType: "ComboBoxItem", 
        addUnknownValues:false,
        optionDataSource: "users", 
        displayField:"lastName", valueField:"username",
        filterFields:["username", "firstName", "lastName"],
        pickListWidth:300,
        pickListFields:[
            {name:"username"},
            {name:"firstName"},
            {name:"lastName"}
        ]
    },
    {
        name: "library", title: "Library", editorType: "select", 
        valueMap: {
            #{list items:book.libraries, as:'lib'}
                "${lib.id}":"${lib}",
            #{/list}
        }
    },
    {title:"Borrow", type:"submit"},
    {title:"Cancel", type:"button" , action:function(){history.go(-1)}
    }
    ]
});
</script>

<!-- 
<div class="navigation">
<a href="javascript: history.go(-1)">Return to search results</a>
</div>
<div class="bookdetails">
    <div class="thumbnail">
        <img src="@{BookDetails.getBookThumbnail(book.id)}" />
    </div>
    <div class="title">
        ${book.name} - #{list items:book.authors, as:'author'}${author}${author_isLast?'.':', '}#{/list}
    </div>  
    <div class="description">
        ${book.description}
    </div>
    <div id="us"></div>
</div>

 -->